import React, { useState ,useRef} from "react";
import '../css/my/homenav.css'

import appleIcon from "../images/appleIcon.png";
import searchIcon from "../images/searchIcon.png";
import bagIcon from "../images/bagIcon.png";
import crossIcon from "../images/crossIcon.png";
// import bagAccountIcon from "../images/bagAccountIcon.png";
// import bagFavouritesIcon from "../images/bagFavouritesIcon.png";
// import bagBagIcon from "../images/bagBagIcon.png";
// import bagSignInIcon from "../images/bagSignInIcon.png";
// import bagOrdersIcon from "../images/bagOrdersIcon.png";
// import useOutsideClick from "../methods/outsideClick";
export default function MyHomeNav() {
    let [navDivClass, setNavDivClass] = useState('myNavDiv')
    let [searchClass, setSearchClass] = useState('searchKDivHid')

    let searchKBar=useRef(null)
    /**
     * 点击搜索按钮，隐藏导航栏，显示搜索栏
     */
    function clickSearch() {
        setNavDivClass('myNavDivHid')
        setSearchClass('searchKDiv')
        setTimeout(() => {
            searchKBar.current.focus();
          }, 500);
    }
    /**
     * 点击取消按钮，显示导航栏，隐藏搜索栏
     */
    function clickCancalSearch() {
        setNavDivClass('myNavDiv')
        setSearchClass('searchKDivHid')
    }

    const hiddenSearch=()=>{
        setNavDivClass('myNavDiv')
        setSearchClass('searchKDivHid')
    }


    return (<div className='KDiv' >
        <div className={navDivClass} >
            <ul >
                <li> <a href='javascript;' > i导航 </a></li>
                <li> <img className='appleIcon' src={appleIcon} alt='' /></li>
                <li> <a href='javascript;' > Mac </a></li>
                <li> <a href='javascript;' > iPad </a></li>
                <li> <a href='javascript;' > iPhone </a></li>
                <li> <a href='javascript;' > Watch </a></li>
                <li> <a href='javascript;' > TV </a></li>
                <li> <a href='javascript;' > Music </a></li>
                <li> <a href='javascript;' > Support </a></li>
                <li>
                    <div> <img src={searchIcon} alt='' onClick={() => clickSearch()}/> </div>
                </li>
                <li> <div> <img src={bagIcon} alt=''/></div> </li>
            </ul>
        </div>
        <div className={searchClass}  >
            <img src={searchIcon} alt='' className='kSIcon'/> 
            <input className='kInput'  placeholder='搜索 apple.com.cn' ref={searchKBar} onBlur={()=>hiddenSearch()}  /> 
            <img src={crossIcon} alt='' className='crossIcon' onClick={() => clickCancalSearch()} /> 
        </div>
    </div>)
}